$(document).ready(function() {
	var box = $('#wrapper > .box');
	$('#wrapper').on({
		mouseover : function() {
			var tg = $(this);
			tg.removeClass().addClass('box over');
			tg.find('> p').text('mouseover');
		},
		mouseout : function() {
			var tg = $(this);
			tg.removeClass().addClass('box out');
			tg.find('> p').text('mouseout');
		},
		click : function() {
			var tg = $(this);
			tg.removeClass().addClass('box click');
			tg.find('> p').text('click');
		}
	}, '.box');

	$('#nav > :input:eq(0)').bind('click', function() {
		$('#wrapper').append(box.eq(0).clone());
	});

	$('#nav > :input:eq(1)').bind('click', function() {
		$('#wrapper').off('mouseover');
	});

	/*
	 * on메서드의 사용법
	 * 
	 * 1. bind()메서드와 동일하게 사용할수 있다.
	 * 
	 * $(selector).on(eventType, data, function(){ ... });
	 * 
	 * 
	 * 2. selector를 넣어주면 동적으로 추가된 엘리먼트에 미리 이벤트가 할당이 가능하다.
	 * 
	 * $(상위 selector).on(eventType, selector, data, function(){ ... });
	 * 
	 * 
	 * off메서드의 사용법
	 * 
	 * 1. 위의 bind()같이 사용된 on() 메서드의 이벤트를 제거하려면
	 * 
	 * $(selector).off(eventType, listener); // eventType, listener생략가능
	 * eventType의 생략시 모든 이벤트를 제거
	 * 
	 * 2. 위의 2번에 사용된 on() 메서드의 이벤트를 제거하려면
	 * 
	 * $(상위selector).off(eventType, selector, listener) // listener생략가능
	 * 
	 */
});